import Base from "../base.js"
// import statusApi from "../../api/status.js"
import CinemasApi from "../../api/cinemas.js"
const cinemasProst = [
    {
        name: "影院名",
        key: "name"
    },
    {
        name: "影院电话",
        key: "phone"
    },
    {
        name: "影院地址",
        key: "address"
    },
    {
        name: "状态",
        key: "status"
    },
];
export default class extends Base {
    constructor(props) {
        super(props);
        this._id = props._id;
        this.data = {
            cinemas: {},
        };
    };
    async render() {
        this.$el.html(`
        <h1 style="text-align:center">修改影院</h1>
        
        <div class="layui" style="padding: 30px;width:400px;margin:auto;margin-left:460px">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                <form class="layui-form" action="">
                <div class="layui-form-item">
                  <label class="layui-form-label" style="width:100px">影院名</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:260px">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label" style="width:100px">影院地址</label>
                  <div class="layui-input-block">
                    <input type="text" name="address" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:260px">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label" style="width:100px">联系电话</label>
                  <div class="layui-input-block">
                    <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:260px">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label status">状态</label>
                  <div class="layui-input-block">
                    <input type="radio" name="status" value="true" title="营业" lay-filter="ChoiceRadio"
                    >
                    <input type="radio" name="status" value="false" title="未营业" lay-filter="ChoiceRadio"
                    >
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button id="change-btn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                  </div>
                </div>
            </form> 
                </div>
            </div> 
        </div>
    
        `)
        layui.form.render();
        this.$statuEle = $(".status");
        
    };
    radioHandel(){
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that=this;
        form.on('radio(ChoiceRadio)', function(data){ //得到 radio 原始 DOM 对象
            const status=data.value; //被点击的 radio 的 value 值
            that.data.cinemas["status"]=status;
          });  
    }
    async findOne() {
        console.log(this.data.cinemas);
        const { _id } = this.data.cinemas;
        this.data.cinemas = await CinemasApi.findOne(_id);
        console.log(_id);
     console.log(data);
      }
    async change() {
        // console.log(this.data.cinemas);
        const { _id,name, address, phone, status } = this.data.cinemas;
    //    console.log({ _id,name, address, phone, status });
        // console.log(this.data.cinemas);
        await CinemasApi.change({ _id,name, address, phone, status })
        // console.log(this.data.cinemas);
        location.hash = "#/info/cinemas";
    }

    handle() {
        // const { cinemas } = this.data;
        _.map(cinemasProst, v => {
            if (v.key == "status") {
                this.$statuEle.on("click", e => {
                    // student[v.key] = e.target.value;
                    this.data.cinemas[v.key] = e.target.value;

                })
            } else {
                $(`input[name=${v.key}]`).on("input", e => {
                    this.data.cinemas[v.key] = e.target.value;
                })
            }
        });
        this.radioHandel()
        $("#change-btn").on("click", this.change.bind(this));
    }
    async change() {
// 获取输入框和单选框的值

        console.log(this.data.cinemas);
        const { _id,name, address, phone, status } = this.data.cinemas;
    //    console.log({ _id,name, address, phone, status });
        // console.log(this.data.cinemas);
        await CinemasApi.change({ _id,name, address, phone, status })
        // console.log(this.data.cinemas);
        location.hash = "#/info/cinemas";
    }
    // async getStatus() {
    //     console.log("in");
    //     this.data.cinemas = await CinemasApi.get();

    //     // console.log(this.data);
    //     // await statusApi.get();
    //     // console.log(data);
    // }
    rerender() {
        const { cinemas } = this.data;
        _.map(cinemas, (v, k) => {
            if (k == "_id" ) {
                return;
            }else if( k == "status"){
                if(!v){
                    // console.log( $(`input[name=status]`));
                  $(`input[value=false]`).attr("checked",true)
                    // console.log( $(`input[value=false]:checked`).val());
                }else{
                    $(`input[value=true]`).attr("checked",true)
                }
            }
            else {
                // console.log($(`input[name=${k}]`).val(cinemas[k]));
                $(`input[name=${k}]`).val(cinemas[k]);
            }
        });

    }
    async mounted() {
        // 获取修改影院的数据
        this.data.cinemas = await CinemasApi.findOne(this._id);
        this.rerender();
        const form =layui.form;
        form.render()
    }
}